<template>
    <div id="watting-for-next">
        <div class="tip" v-if="map.p1">
            <img src="../../assets/img/progress/tag.png" class="tag" alt="" srcset="">
            <div class="p-area">
                <div class="p1">{{ map.p1 }}</div>
                <div class="p2">{{ map.p2 }}</div>
            </div>
        </div>
        <div class="banner"
            :class="[wattingStatus == '1' || wattingStatus == '3' || wattingStatus == '4' ? 'success-bg' : '']">
            <template v-if="wattingStatus === '0' || wattingStatus === '2'">
                <div class="remain-time">
                    <span>剩余时间:</span>
                    <a-statistic-countdown :value="deadline" format="D 天 H 时 m 分 s 秒" />
                </div>
                <div class="to-delivery" @click="toPath">
                    <span>{{ map.p3 }}</span>
                    <RightOutlined />
                </div>
            </template>
            <template v-if="wattingStatus === '1'">
                <div class="train">
                    <div class="train-title">培训时间:</div>
                    <div class="train-date">{{ trainDate }}</div>
                </div>
            </template>
            <template v-if="wattingStatus === '3'">
                <div class="train">
                    <div class="train-title">面试时间:</div>
                    <div class="train-date">{{ interviewTime == null ? '线下面试' : interviewTime }}</div>
                </div>
            </template>
            <template v-if="wattingStatus === '4'">
                <div class="train">
                    <div class="train-title">简历投递:</div>
                    <div class="train-date">{{ resumesTime == null ? '线下面试' : resumesTime }}</div>
                </div>
            </template>
        </div>
        <Steps :current="props.process"></Steps>
        <commonModal ref="myModal">
            <template #default>
                <div class="modal-wrap">
                    <div class="modal-wrap-bg">
                        <div class="modal-wrap-inner">
                            <div class="modal-wrap-item1">亲爱的{{ resumeInfo.userName }}同学：</div>
                            <div class="modal-wrap-item2">你好！</div>
                            <div class="modal-wrap-item3">
                                我们很开心通知您通过了方田教育的培训考核，正式进入三方签约环节，为了明确您的签约意向，我们向您发送此确认书。请认真阅读后确认是否签署。</div>
                            <div class="modal-wrap-item4">——方田教育{{ resumeInfo.currentDay }}</div>
                        </div>
                    </div>
                    <div class="modal-bottom">
                        <div class="content">如果您在<span
                                style="color: #FF4242;">三个工作日</span>之内未给出明确答复，则视为放弃此份offer，公司将不再为您保留此岗位。</div>
                        <a-button type="primary" @click="checkAgreement" v-if="educationType == 0"
                            class="modal-btn">查看应约协议</a-button>
                        <a-button type="primary" @click="confirm" v-else class="modal-btn">确 定</a-button>
                    </div>
                </div>
            </template>
        </commonModal>
    </div>
</template>

<script setup lang='ts'>
import Steps from '@/components/Steps.vue';
import commonModal from '../index/commonModal.vue';
const props = defineProps(['wattingStatus', 'process']);
import { useStore } from '@/store';
const router = useRouter();
const store = useStore();
const { resumeInfo } = store as any;
import apis from "../../api/index.ts"
import { message } from 'ant-design-vue';
const { userResumesProcess } = apis
console.log(resumeInfo.resumesId, 'userInfo')
const statusMap = {
    '3-2': {
        p1: '预约面试成功！',
        p2: "请在对应时间内参加培训，如有变动请提前1天和对应HR联系。",
    },
    '4-1': {
        p1: "恭喜通过面试！",
        p2: "请在7天内选定培训期数，逾期未填写视为自愿放弃",
        p3: "去填写"
    },
    '4-2': {
        p1: "预约培训成功!",
        p2: "请在对应时间内参加培训，如有变动请提前和对应HR联系。",
        p3: "去填写"
    },
    "6-0": {
        p1: "恭喜通过考核！",
        p2: "请在3天内确认是否接受Offer，逾期未处理视为自愿放弃。",
        p3: "去确认"
    }
}

const route = useRoute();
const { appointmentTrainingTime, resumesTime, offerTime, interviewTime, trainingTime, educationType, passedStatus } = route.query as any
const map = ref<any>({})
const wattingStatus = ref<string>("")
const myModal = ref<typeof commonModal>(commonModal);
const trainDate = ref<string>('');


//trainDate.value = appointmentTrainingTime


const deadline = ref();
//const deadline = ref(wattingStatus.value == '0' ? appointmentTrainingTime : offerTime);
watch(() => props.process, (val) => {
    // 
    if (val == '3-2') {//3的时候预约
        wattingStatus.value = "3"
    }
    if (val == '4-1') {
        console.log(passedStatus)
        //passedStatus 1 未通过面试  0 通过面试
        if (passedStatus == 1) {
            wattingStatus.value = "0"
            statusMap['4-1'] = {
                p1: "恭喜通过面试！",
                p2: "请在7天内选定培训期数逾期未填写视为自愿放弃",
                p3: "去填写"
            }
            deadline.value = appointmentTrainingTime;

        } else {
            wattingStatus.value = "1"
            statusMap['4-1'] = {
                p1: "预约培训成功",
                p2: "请在对应时间内参加培训，如有变动请提前和对应HR联系。",
                p3: ""
            }
            trainDate.value = resumesTime
        }

    }
    if (val == '4-2') {//3的时候预约
        wattingStatus.value = "1"
        trainDate.value = trainingTime;
    }
    if (val == "6-0") {//填写offer
        wattingStatus.value = "2";
        deadline.value = offerTime;
    }
    if (val == "2-0" || val == "3-1" || val == "4-3" || val == "4-4" || val == "5-0") {//填写offer
        wattingStatus.value = "4";
        deadline.value = resumesTime;
    }
    map.value = statusMap[props.process] || {}
}, { immediate: true })

const toPath = () => {
    //0的时候去首页填写参培期数
    if (wattingStatus.value === '0') {
        //
        router.push({
            path: '/',
            query: {
                id: 2
            }
        });
    }
    if (wattingStatus.value === '2') {
        myModal.value.show = true
    }
}

const checkAgreement = () => {
    router.push('/contract')
}

const confirm = () => {
    myModal.value.show = false
}
onMounted(() => {
    if (props.process == '6-0') {
        myModal.value.show = true
    }
    //
    getUserResumesProcess();
})
const getUserResumesProcess = async () => {
    const data: any = await userResumesProcess({ resumesId: resumeInfo.resumesId });
    console.log(data, 'getUserResumesProcess');
    if (data && data.code === '10000') {
        router.push({
            path: '/progress',
            query: { ...data.data }
        })
    } else {
        message.error(data.msg)
    }
}
</script>

<style lang="scss" scoped>
.remain-time {
    display: flex;
    align-items: center;
    color: #ff4242;

    span {
        font-size: 20px;
        margin-right: 10px;

    }

    :deep(.ant-statistic-content-value) {
        font-size: 20px;
        color: #ff4242;
    }
}

.tip {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;

    img {
        width: 80px;
        margin-right: 20px;
        margin-bottom: 10px
    }

    .p-area {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .p1 {
            font-weight: 500;
            font-size: 24px;
            color: #333333;
            line-height: 28px;

        }

        .p2 {
            font-weight: 400;
            font-size: 16px;
            color: #333333;
        }
    }
}

.banner {
    width: 894px;
    height: 72px;
    background: #FEE0D6;
    border-radius: 10px 10px 10px 10px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.success-bg {
    background: #209EE4 !important;
    color: #fff !important;
}

.to-delivery {
    width: 100px;
    height: 42px;
    border-radius: 75px 75px 75px 75px;
    border: 1px solid rgba(255, 66, 66, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #ff4242;
}

.train {
    display: flex;

    .train-title {
        margin-right: 10px;
    }
}

.modal-wrap {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 460px;

    .modal-wrap-bg {
        background: rgba(0, 0, 0, 0.5);
        background: url("../../assets/img/login/login-bg.png");
        background-size: 100% 100%;
        width: 100%;
        height: 282px;
        padding: 24px 20px;
        box-sizing: border-box;
        color: #fff;

        .modal-wrap-inner {
            position: relative;
            z-index: 9;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 282px;
            background: rgba(0, 0, 0, 0.5);
            /* 半透明黑色背景 */
            z-index: 1;
            /* 确保伪元素位于内容后面 */
        }

        .modal-wrap-item2 {
            margin-top: 20px;
            margin-bottom: 10px
        }

        .modal-wrap-item4 {
            margin-top: 42px;
            text-align: right;
        }
    }

    .modal-bottom {
        position: relative;
        width: 460px;

        .content {
            width: 460px;
            line-height: 28px;
            margin: 20px 0;
        }

        .modal-btn {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
</style>